<template>
  <div id="app">
    <el-container>
      <el-aside width="64" v-if="isCollapse">
        <div style="width: 64px; height: 60px;">
          <a href="/home"><img src="@/assets/img/logo1.jpg" style="float: left; cursor:pointer"></a>
        </div>
        <el-menu class="el-menu-vertical" unique-opened :collapse="isCollapse" background-color="rgb(48, 65, 86)"
                 :router="true" :default-active="activePath">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item :index="it.path+''" v-for="it in item.slist" :key="it.id"  @click="saveNavState(it.path+'')">
              <i :class="it.icon"></i>
              <span>{{it.title}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-aside width="200" v-else>
        <div style="width: 200px; height: 60px;">
          <a href="/home"><img src="@/assets/img/logo.jpg" style="float: left; cursor:pointer"></a>
        </div>
        <el-menu class="el-menu-vertical" unique-opened :collapse="isCollapse" :router="true" :default-active="activePath">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item :index="it.path+''" v-for="it in item.slist" :key="it.id"  @click="saveNavState(it.path+'')">
              <i :class="it.icon"></i>
              <span>{{it.title}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="fold" @click="handleCollapse">
            <i class="el-icon-s-unfold" :label="true" v-if="isCollapse"></i>
            <i class="el-icon-s-fold" :label="false" v-else></i>
          </div>
          <el-dropdown>
            <span class="el-dropdown-link">
              {{username}}
              <i class="el-icon-setting" style="margin-left: 5px" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="profile()">查看个人信息</el-dropdown-item>
              <el-dropdown-item @click.native="logout()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-container>
          <el-main style="height: 645px;flex-grow:2;">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form ref="form" :model="userForm" :rules="userRules" label-width="120px" style="height:350px">
        <div style="float: left; width: 50%" >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <el-upload
              :class="{ uploadSty: showBtnImg, disUploadSty: noneBtnImg }"
              :ref="imageUpload"
              action="#"
              accept="image/png,image/gif,image/jpg,image/jpeg"
              list-type="picture-card"
              :limit="imageUpload.limitNum"
              :auto-upload="false"
              :before-upload="handleBeforeUpload"
              :on-change="imgChange"
              :on-remove="handleImgRemove"
              :file-list="headImages">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="userForm.birthday" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </div>
        <div style="float: left; width: 50%">
          <el-form-item label="真实姓名" prop="realname">
            <el-input disabled v-model="userForm.realname" />
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="userForm.phone" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="userForm.sex" :label="0" >隐藏</el-radio>
            <el-radio v-model="userForm.sex" :label="1" >男</el-radio>
            <el-radio v-model="userForm.sex" :label="2" >女</el-radio>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email" placeholder="请输入邮箱" />
          </el-form-item>
        </div>
        <div style="float:left ; width: 100%">
          <el-form-item label="个人简介" prop="personalProfile">
            <el-input type="textarea" v-model="userForm.personalProfile" placeholder="请输入个人简介" />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getMenuList} from '@/api/menu'
  import {getUserName,updateUser} from '@/api/system/user'
  export default {
    data() {
      return {
        username: JSON.parse(localStorage.getItem("loginName")),
        // 菜单列表
        menuList:[],
        // 是否折叠
        isCollapse:false,
        // 被激活的连接
        activePath:'',
        // 对话框标题
        title: '',
        headImages:[],
        // 是否显示弹出层
        open: false,
        isUploadImg: true,
        showBtnImg: true,
        noneBtnImg: false,
        limitCountImg: 1,
        imageUpload: {
          uploadFiles:[],
          //上传限制
          limitNum: 1, //需要修改为隐藏添加图片的入口
          // 上传的地址
          // url: "http://localhost:9000/static/common/upload", // 上传的图片服务器地址
        },
        userForm: {},
        userRules: {},
      }
    },
    watch:{
      open(newValue,oldValue){
        if(!newValue){
          this.headImages.pop();
          this.noneBtnImg=false;
        }
      }
    },
    created() {
      this.getMenuList()
    },
    methods: {
      // 获取所有的导航菜单
      getMenuList(){
        getMenuList().then(res => {
          this.menuList = res.data.data
        })
      },
      // 保存二级菜单的路径
      saveNavState(activePath){
        window.sessionStorage.setItem('activePath',activePath);// 存放点击的二级菜单
        this.activePath = activePath;// 给点击的菜单添加高亮
      },
      // 退出的方法
      logout() {
        window.localStorage.removeItem("loginName");
        window.localStorage.removeItem("token");
        this.$router.push("/login");
      },
      // 取消按钮
      cancel() {
        this.open = false;
      },
      // 个人信息页面
      profile() {
        this.headImages=[];
        this.userForm.sex = 0
        getUserName(this.username).then( res => {
          this.userForm = res.data.data
          this.headImages.push({url:this.userForm.avatar})
        })
        this.noneBtnImg=true;
        this.open = true
        this.title = '个人信息'
      },
      // 图片上传
      handleBeforeUpload(file) {
        if (!(file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg")
        ){
          this.$notify.warning({
            title: "警告",
            message: "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
          });
        }
        let size = file.size / 1024 / 1024 / 2;
        if (size > 2) {
          this.$notify.warning({
            title: "警告",
            message: "图片大小必须小于2M",
          });
        }
      },
      imgChange(file, fileList) {
        this.userForm.avatar = file.url
        this.noneBtnImg = fileList.length >= this.limitCountImg;
      },
      handleImgRemove(file, fileList) {
        this.noneBtnImg = fileList.length >= this.limitCountImg;
      },
      // 折叠
      handleCollapse() {
        this.isCollapse = !this.isCollapse
      },
      // 提交
      submitForm(){
        if(this.userForm.id != null) {
          updateUser(this.userForm).then(res => {
            this.$message.success("修改成功！！")
            this.open = false
          })
        }
      }
    }
  }
</script>

<style>
  html, body {
    margin: 0;
    height: 100%;
  }
  .el-header{
    background-color: white;
    color: #333;
    text-align: center;
    line-height: 60px;
    padding-left: 0px;
  }
  .el-aside {
    background-color: rgb(48, 65, 86);
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    /*line-height: 160px;*/
  }
  body > .el-container {
    margin-bottom: 40px;
  }
  .el-menu{
    border-right: none;
  }
  .el-menu-item {
    color: rgb(191, 203, 217);
    background-color: rgb(48, 65, 86);
  }
  .el-menu-item:hover {
    color: rgb(191, 203, 217);
    background-color: rgb(38, 52, 69);
  }
  .el-submenu__title{
    color: rgb(191, 203, 217);
    background-color: rgb(48, 65, 86);
  }
  .el-submenu__title:hover{
    color: rgb(191, 203, 217);
    background-color:  rgb(38, 52, 69);
  }
  .fold {
    font-size: 24px;
    float: left;
    padding-left: 20px;
    cursor: pointer;
  }
  .el-dropdown {
    cursor: pointer;
  }
  .iconfont {
    margin-right: 5px;
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top: 6vh !important;
  }
  disUploadSty .el-upload--picture-card {
    display: none; /* 上传按钮隐藏 */
  }

</style>
